<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="public.css">
</head>

<body>
  <div class="box">
    <canvas id="myCanvas" width="1000" height="800"></canvas>
  </div>
  <script type="text/javascript" src="drawFlowChart.js"></script>
  <script>
    var canvas = document.getElementById("myCanvas");
    var cxt = canvas.getContext('2d');
    var canWidth = cxt.canvas.clientWidth;
    var init = {
      top: 32,
      spaceH: 70
    };
    var row2 = {
      y: init.top + init.spaceH,
      data: [{
          type: 'Step',
          text: '业务名称1',
          name: 'step_2_1',
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_3_1'
          }],
          x: '',
          y: '',
          requestData: {}
        },
        {
          type: 'Step',
          text: '业务名称2',
          name: 'step_2_2',
          arrowArr: [{
            arrow: 'drawBottomToLeft',
            to: 'step_3_2'
          }]
        },
        {
          type: 'Step',
          text: '业务名称3',
          name: 'step_2_3',
          arrowArr: [{
            arrow: 'drawBottomToRight',
            to: 'step_3_2'
          }]
        },
        {
          type: 'Step',
          name: 'step_2_4',
          text: '业务名称4',
          arrowArr: [{
            arrow: 'drawBottomToRight',
            to: 'step_7_1'
          }]
        }
      ]
    };
    row2.data = calChartX(canWidth, row2.data, row2.y);
    var flowData = [{
        row: 1,
        y: init.top,
        data: [{
          type: 'Start',
          text: '开始',
          name: 'step_1_1',
          arrowArr: [{
              arrow: 'drawBottomToTop',
              to: 'step_2_1'
            },
            {
              arrow: 'drawBottomToTop',
              to: 'step_2_2'
            },
            {
              arrow: 'drawBottomToTop',
              to: 'step_2_3'
            }, {
              arrow: 'drawBottomToTop',
              to: 'step_2_4'
            }
          ],
          x: canWidth / 2,
          y: ''
        }]
      },
      {
        row: 2,
        y: init.top + init.spaceH,
        data: row2.data,
        method: {
          // onmouseenter: hoverhandle,
          onmousemove: hoverhandle,
          onmouseleave: hoverhandle2,
          onclick: hoverSingleChart
        }
      },
      {
        row: 3,
        y: '',
        data: [{
          type: 'Step',
          text: '业务名称4',
          x: row2.data[0].x,
          name: 'step_3_1',
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_4_1'
          }],
          color: {
            bgColor: '#ff6700', // 背景颜色
            borderColor: '#fff', // 背景颜色
            fontColor: '#fff', // 背景颜色
          }
        }, {
          type: 'Step',
          text: '业务名称5',
          name: 'step_3_2',
          x: canWidth / 2,
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_4_2'
          }]
        }],
        color: 'red'

      },
      {
        row: 4,
        y: '',
        data: [{
          type: 'Step',
          text: '业务名称6',
          x: row2.data[0].x,
          name: 'step_4_1',
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_5_1'
          }]
        }, {
          type: 'Step',
          text: '业务名称7',
          name: 'step_4_2',
          x: canWidth / 2,
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_5_2'
          }]
        }]
      },
      {
        row: 5,
        y: '',
        data: [{
          type: 'Step',
          text: '业务名称8',
          x: row2.data[0].x,
          name: 'step_5_1',
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_6_1'
          }]
        }, {
          type: 'Step',
          text: '业务名称9',
          name: 'step_5_2',
          x: canWidth / 2,
          arrowArr: [{
              arrow: 'drawBottomToTop',
              to: 'step_6_2'
            },
            {
              arrow: 'drawBottomToTop',
              to: 'step_6_3'
            }
          ]
        }]
      },
      {
        row: 6,
        y: '',
        data: [{
          type: 'Step',
          text: '业务名称10',
          x: row2.data[0].x,
          name: 'step_6_1',
          arrowArr: [{
            arrow: 'drawBottomToLeft',
            to: 'step_7_1'
          }]
        }, {
          type: 'Step',
          text: '业务名称11',
          name: 'step_6_2',
          x: row2.data[1].x,
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_7_1'
          }]
        }, {
          type: 'Step',
          text: '业务名称12',
          name: 'step_6_3',
          x: row2.data[2].x,
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_7_1'
          }]
        }]
      },
      {
        row: 7,
        y: init.top + init.spaceH * 6 + 10,
        data: [{
          type: 'Condition',
          text: '判断条件',
          x: canWidth / 2,
          name: 'step_7_1',
          arrowArr: [{
            arrow: 'drawBottomToTop',
            to: 'step_8_1'
          }]
        }]
      },
      {
        row: 8,
        y: init.top + init.spaceH * 7 + 30,
        isAverage: true, //平均计算x
        data: [{
            type: 'Step',
            text: '业务名称12',
            name: 'step_8_1',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_8_2'
            }],
            requestData: {},
            method: {
              onmousemove: null,
              onmouseleave: null,
              onclick: null
            }
          },
          {
            type: 'Step',
            text: '业务名称4',
            name: 'step_8_2',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_8_3'
            }]
          },
          {
            type: 'Step',
            text: '业务名称4',
            name: 'step_8_3',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_8_4'
            }]
          },
          {
            type: 'Step',
            name: 'step_8_4',
            text: '业务名称4',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_8_5'
            }]
          },
          {
            type: 'Step',
            name: 'step_8_5',
            text: '业务名称4',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_8_6'
            }]
          },
          {
            type: 'Step',
            name: 'step_8_6',
            text: '业务名称4',
            arrowArr: [{
              arrow: 'drawBottomToTop',
              to: 'step_9_1'
            }]
          }
        ]
      },
      {
        row: 9,
        y: init.top + init.spaceH * 8 + 30,
        isAverage: true,
        data: [{
            type: 'Step',
            text: '业务名称4',
            name: 'step_9_1',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_9_2'
            }],
            requestData: {},
            method: {
              onmousemove: null,
              onmouseleave: null,
              onclick: hoverSingleChart
            }
          },
          {
            type: 'Step',
            text: '业务名称4',
            name: 'step_9_2',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_9_3'
            }]
          },
          {
            type: 'Step',
            text: '业务名称4',
            name: 'step_9_3',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_9_4'
            }]
          },
          {
            type: 'Step',
            name: 'step_9_4',
            text: '业务名称4',
            arrowArr: [{
              arrow: 'drawRightToLeft',
              to: 'step_9_5'
            }]
          },
          {
            type: 'End',
            name: 'step_9_5',
            text: '结束',
            arrowArr: []
          }
        ]
      }
    ];
    drawFlowChart(cxt, canvas, flowData, init.top, init.spaceH);


    function hoverSingleChart(singleData) {
      console.log("---------鼠标事件-----------");
      console.log(singleData);
    }

    function hoverhandle(singleData) {
      console.log("---------鼠标事件 hover 事件-----------");
      console.log(singleData);
    }

    function hoverhandle2(singleData) {
      console.log("---------鼠标事件233333-----------");
      console.log(singleData);
    }
  </script>
</body>

</html>